<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>图书列表展示</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <link href="css/list.css" rel="stylesheet">
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <script src="js/jq-paginator.js"></script>

</head>

<body>
<div class="bookContainer">
    <h2>图书列表展示</h2>
    <div class="navbar-justify-between">
        <div>
            <button class="btn btn-outline-info" onclick="location.href='book_add.html'" type="button">添加图书</button>
            <button class="btn btn-outline-info" onclick="batchDelete()" type="button">批量删除</button>
        </div>
    </div>

    <table>
        <thead>
        <tr>
            <td>选择</td>
            <td class="width100">图书ID</td>
            <td>书名</td>
            <td>作者</td>
            <td>数量</td>
            <td>定价</td>
            <td>出版社</td>
            <td>状态</td>
            <td class="width200">操作</td>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td><input class="book-select" id="selectBook" name="selectBook" type="checkbox" value="1"></td>
            <td>1</td>
            <td>大秦帝国第一册</td>
            <td>我是作者</td>
            <td>23</td>
            <td>33.00</td>
            <td>北京出版社</td>
            <td>可借阅</td>
            <td>
                <div class="op">
                    <a href="book_update.html?bookId=1">修改</a>
                    <a href="javascript:void(0)" onclick="deleteBook(1)">删除</a>
                </div>
            </td>
        </tr>
        <tr>
            <td><input class="book-select" id="selectBook" name="selectBook" type="checkbox" value="1"></td>
            <td>2</td>
            <td>大秦帝国第二册</td>
            <td>我是作者</td>
            <td>23</td>
            <td>33.00</td>
            <td>北京出版社</td>
            <td>可借阅</td>
            <td>
                <div class="op">
                    <a href="book_update.html?bookId=2">修改</a>
                    <a href="javascript:void(0)" onclick="deleteBook(2)">删除</a>
                </div>
            </td>
        </tr>
        <tr>
            <td><input class="book-select" id="selectBook" name="selectBook" type="checkbox" value="1"></td>
            <td>3</td>
            <td>大秦帝国第三册</td>
            <td>我是作者</td>
            <td>23</td>
            <td>33.00</td>
            <td>北京出版社</td>
            <td>可借阅</td>
            <td>
                <div class="op">
                    <a href="book_update.html?bookId=3">修改</a>
                    <a href="javascript:void(0)" onclick="deleteBook(3)">删除</a>
                </div>
            </td>
        </tr>
        <tr>
            <td><input class="book-select" id="selectBook" name="selectBook" type="checkbox" value="1"></td>
            <td>4</td>
            <td>大秦帝国第四册</td>
            <td>我是作者</td>
            <td>23</td>
            <td>33.00</td>
            <td>北京出版社</td>
            <td>可借阅</td>
            <td>
                <div class="op">
                    <a href="book_update.html?bookId=4">修改</a>
                    <a href="javascript:void(0)" onclick="deleteBook(4)">删除</a>
                </div>
            </td>
        </tr>
        </tbody>
    </table>

    <div class="demo">
        <ul class="pagination justify-content-center" id="pageContainer"></ul>
    </div>
    <script>

        //获取图书列表
        getBookList();

        function getBookList() {
            $.ajax({
                type: "get",
                url: "/book/getListByPage" + location.search,
                success: function (result) {
                    console.log(result);
                    //真实前端代码需要分的更细一点, 此处不做判断
                    if (result == null || result.data == null) {
                        location.href = "login.html";
                        return;
                    }
                    var finalHtml = "";
                    var data = result.data;
                    for (var book of data.records) {
                        finalHtml += '<tr>';
                        finalHtml += '<td><input type="checkbox" name="selectBook" value="' + book.id + '" id="selectBook" class="book-select"></td>';
                        finalHtml += '<td>' + book.id + '</td>';
                        finalHtml += '<td>' + book.bookName + '</td>';
                        finalHtml += '<td>' + book.author + '</td>';
                        finalHtml += '<td>' + book.count + '</td>';
                        finalHtml += '<td>' + book.price + '</td>';
                        finalHtml += '<td>' + book.publish + '</td>';
                        finalHtml += '<td>' + book.statusCN + '</td>';
                        finalHtml += '<td><div class="op">';
                        finalHtml += '<a href="book_update.html?bookId=' + book.id + '">修改</a>';
                        finalHtml += '<a href="javascript:void(0)" onclick="deleteBook(' + book.id + ')">删除</a>';
                        finalHtml += '</div></td>';
                        finalHtml += "</tr>";
                    }
                    $("tbody").html(finalHtml);
                    $("#pageContainer").jqPaginator({
                        totalCounts: data.total, //总记录数
                        pageSize: 10, //每页的个数
                        visiblePages: 5, //可视页数
                        currentPage: data.pageRequest.currentPage, //当前页码
                        first: '<li class="page-item"><a class="page-link">首页</a></li>',
                        prev: '<li class="page-item"><a class="page-link" href="javascript:void(0);">上一页</a></li>',
                        next: '<li class="page-item"><a class="page-link" href="javascript:void(0);">下一页</a></li>',
                        last: '<li class="page-item"><a class="page-link" href="javascript:void(0);">最后一页</a></li>',
                        page: '<li class="page-item"><a class="page-link" href="javascript:void(0);">{{page}}</a></li>',
                        //页面初始化和页码点击时都会执行
                        onPageChange: function (page, type) {
                            if (type != 'init') {
                                location.href = "book_list.html?currentPage=" + page;
                            }
                        }
                    });
                }
            });
        }


        // /**
        //  * 删除图书函数
        //  * @param {number} bookId 要删除的图书ID
        //  */
        // function deleteBook(bookId) {
        //     // 在实际项目中，这里应该发送删除请求到服务器
        //     if (confirm("确定要删除这本图书吗？")) {
        //         alert("删除功能待实现，图书ID：" + bookId);
        //     }
        // }

        /**
         * 删除图书（逻辑删除）
         * @param id 图书ID
         */
        function deleteBook(id) {
            var isDelete = confirm("确认删除?");
            if (isDelete) {
                $.ajax({
                    type: "post",
                    url: "/book/deleteBook",
                    data: {
                        bookId: id,  // 改为 bookId 匹配后端参数
                    },
                    success: function (result) {
                        if (result) {
                            alert("删除成功");
                            location.href = "book_list.html";
                        } else {
                            alert("删除失败");
                        }
                    },
                    error: function (error) {
                        console.log(error);
                        alert("删除失败");
                    }
                });
            }
        }

        // //翻页信息
        // $("#pageContainer").jqPaginator({
        //     totalCounts: 100, //总记录数
        //     pageSize: 10,    //每页的个数
        //     visiblePages: 5, //可视页数
        //     currentPage: 1,  //当前页码
        //     first: '<li class="page-item"><a class="page-link">首页</a></li>',
        //     prev: '<li class="page-item"><a class="page-link" href="javascript:void(0);">上一页<\/a><\/li>',
        //     next: '<li class="page-item"><a class="page-link" href="javascript:void(0);">下一页<\/a><\/li>',
        //     last: '<li class="page-item"><a class="page-link" href="javascript:void(0);">最后一页<\/a><\/li>',
        //     page: '<li class="page-item"><a class="page-link" href="javascript:void(0);">{{page}}<\/a><\/li>',
        //     //页面初始化和页码点击时都会执行
        //     onPageChange: function (page, type) {
        //         console.log("第" + page + "页, 类型:" + type);
        //     }
        // });

        // function deleteBook(id) {
        //     var isDelete = confirm("确认删除?");
        //     if (isDelete) {
        //         //删除图书
        //         alert("删除成功");
        //     }
        // }

        /**
         * 批量删除图书
         */
        function batchDelete() {
            var isDelete = confirm("确认批量删除?");
            if (isDelete) {
                // 获取所有选中的复选框的值
                var ids = [];
                $("input:checkbox[name='selectBook']:checked").each(function () {
                    ids.push($(this).val());
                });

                if (ids.length === 0) {
                    alert("请选择要删除的图书");
                    return;
                }

                console.log("要删除的IDs:", ids);

                // 发送批量删除请求
                $.ajax({
                    type: "post",
                    url: "/book/batchDeleteBook",
                    traditional: true,  // 重要：这确保数组参数正确传递
                    data: {
                        ids: ids
                    },
                    success: function (result) {
                        if (result) {
                            alert("删除成功");
                            // 重新刷新页面
                            location.href = "book_list.html";
                        } else {
                            alert("删除失败");
                        }
                    },
                    error: function (error) {
                        console.log(error);
                        alert("删除失败");
                    }
                });
            }
        }

    </script>
</div>
</body>

</html>